import React from 'react'
import { connect } from 'dva'
import { Form, Button, Modal, Popconfirm, Table, Row, Col, Input, Select, Cascader, Icon, Checkbox, DatePicker } from 'antd'
import { Link, hashHistory } from 'dva/router'
import config from 'config/config'
import { mapStateToProps } from 'utils/view_utils'
import styles from './buoyListStyle.less'
import ListPage from 'widget/PageTmpl/ListPage'
import classnames from 'classnames/bind';
let cx = classnames.bind(styles);
import FlagBtn from 'widget/FlagBtn/FlagView'

const FormItem = Form.Item
const { RangePicker } = DatePicker
const confirm = Modal.confirm;


const buoyListView = function ({ dispatch, model, form }) {
    // 表单的子函数
    const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
    // 取出model对象，命名空间
    const { modelObj, namespace } = model

    // modelObj.xxx获取model中状态机的值
    let { areaList, businessIdList, contentId } = modelObj
    // 资讯新增/编辑/详情页跳转
    function addOrEditSkip(type, id) {
        hashHistory.push({
            pathname: '/home/advertisementAdmin/buoyDetail',
            query: { actionType: type, slideshowId: id }
        });
    }
    function refreshOrder(id) {
        dispatch({
            type: `${namespace}/refreshOrder`,
            payload: {
                slideshowId: id
            }
        })
    }

    let pageProps = {
        styles: 'word-wrap:break-word;word-break:break-all;',
        // ---------- 界面部分 ----------
        ui: {
            // 页面接口地址
            api_url: `admin/advertisementBuoys/queryList`,
            // 接口方式
            method: "POST",
            // "data_field_name":"data",
            app: "",
            // 接口参数
            params: {
            },
            // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
            // "mockData": mockData,
            mockData: null,
            // 查询栏
            search_bar: {
                fields: [ 
                    // {
                    //     en_name: 'province',
                    //     zh_name: '投放城市',
                    //     elem_type: 'Cascader',
                    //     elem_valid_type: 'string',
                    //     cmpt_items: areaList,
                    //     split_keys: ['provinceCode', 'cityCode']
                    // },
                    {
                        en_name: 'title',
                        zh_name: '浮标名称',
                        elem_type: 'Input',
                        elem_valid_type: 'string',
                    },
                    {
                        en_name: 'status',
                        zh_name: '上架状态',
                        elem_type: 'Select',
                        elem_valid_type: 'string',
                        cmpt_items: [
                            {
                                value: '0',
                                label: '未上架'
                            },
                            {
                                value: '1',
                                label: '已上架'
                            },
                            {
                                value: '2',
                                label: '已下架'
                            }
                        ],
                    },
                    {
                        en_name: 'validTime',
                        zh_name: '生效时间',
                        elem_type: 'Date',
                        format: 'YYYY-MM-DD',
                        split_keys: ['startTime', 'endTime'],
                        elem_valid_type: 'string'
                    },
                ],
                searchHandler: () => { // 自定义搜索按钮回调函数，点击搜索时触发
                    console.log('search click')
                },
                resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
                    console.log('reset click')
                },
                searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
                    console.log('search finish', params)
                },
                pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
                    'channel',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
                ]
            },
            // 数据表格  序号 城市 广告名称  图片 生效日期 状态  创建人 创建时间 更新人 更新时间   操作
            table:
            {
                status_params: "status=0",
                status_text: "全部",
                scroll: { x: 1300 },
                fields: [
                    {
                        en_name: "title",
                        zh_name: "广告名称",
                        width: 300
                      },
                      {
                        en_name: "city",
                        zh_name: "投放城市",
                        width:200
                      },
                      {
                        en_name: "location",
                        zh_name: "所属产品",
                        width: 120,
                        render: (a) => {
                          const arr = ['', '首页', '福利']
                          return (
                            <span>{arr[a]}</span>
                          )
                        }
                      },
                      {
                        en_name: "startDate",
                        zh_name: "有效日期",
                        width: 460,
                        render: (a, item, index, d, e, f) => {
            
                          return (
                            <div>{item.startTime}{item.startTime ? '-' : ''}{item.endTime}</div>
                          )
                        }
                      },
                      // {
                      //   en_name: "location",
                      //   zh_name: "广告位置",
                      //   width:120,
                      //   render: (a, item, index, d, e, f) => {
            
                      //         return (
                      //             <span>{['','首页','美房详情'][item.location]}</span>
                      //         )
                      //   }
            
                      // },
                      {
                        en_name: "status",
                        zh_name: "上架状态",
                        width: 120,
                        render: (text, item, i) => {
                          if (text == '1') {
                            return <span>上架</span>
                          } else if (text == '2') {
                            return <span>下架</span>
                          } else if (text == '3') {
                            return <span>失效</span>
                          }else if (text == '0') {
                            return <span>未上架</span>
                          }
            
                        }
                      },
                      {
                        en_name: "auditStatus",
                        zh_name: "审核状态",
                        width: 80,
                        render: (text, item, i) => {
                          switch (text) {
                            case 1:
                              return <span>审核中</span>
                            case 2:
                              return <span>已审核</span>
                            case 0:
                              return <span>待审核</span>
                            case -1:
                              return <span>审核驳回</span>
                          }
            
                        }
                      },
                      // {
                      //   en_name: "linkType",
                      //   zh_name: "链接类型",
                      //   width: 150,
                      //   render: (text, item, i) => {
            
                      //     return <span>{obj[Number(text)]}</span>
                      //   }
                      // },
                      {
                        en_name: "creator",
                        zh_name: "创建人",
                        width: 80,
                      },
                      {
                        en_name: "createTime",
                        zh_name: "创建时间",
                        width: 280
                      },
                    {
                        en_name: "edit",
                        zh_name: "操作",
                        width: 180,
                        fixed: 'right',
                        render: (a, item, index, d, e, f) => {
                            return (
                                <span>
                                    <FlagBtn node={<a onClick={() => addOrEditSkip('detail', item.advertisementBuoysId)}>查看<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                                    <FlagBtn node={<a onClick={() => addOrEditSkip('edit', item.advertisementBuoysId)}>编辑<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                                    <FlagBtn node={<a onClick={() => refreshOrder(item.advertisementBuoysId)}>刷新排位<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                                </span>
                            )
                        },
                    }
                ]
            },
            // 操作栏
            action_bar: [
                {
                    func_name: "add",
                    label: "新增浮标",
                    btnId: '',
                    type: "primary",
                    onClick: (e) => {
                        hashHistory.push({
                            pathname: '/home/advertisementAdmin/buoyDetail',
                            query: { actionType: 'add', }
                        });
                    }
                }
            ]
        },
    }

    if (!!modelObj.biz) {
        pageProps.biz = modelObj.biz
        pageProps.biz.syncBackCbf = (biz) => {
            dispatch({
                type: `${namespace}/updateStore`,
                payload: { biz }
            })
        }
    }

    return (
        <div className={cx('pageLayout')}>
            <ListPage pageProps={pageProps} />
        </div>
    )
}
// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(buoyListView))
